<div class="toppanel">
	<div class="box">
		<div id="form">
			<form>
				<div class="element">
					<div class="xleft">
						<label> Tên đăng nhập : </label>
					</div>
					<div class="xright">
						<input id="name" type="text" name="name">
					</div>
				</div>
				<div class="element">
					<div class="xleft">
						<label> Bạn đã có tài khoản chưa? </label>
					</div>
					<div class="xright">
						<input type="radio" value="0" name="checkacc" checked="checked"><label>Không,
							tôi muốn tạo 1 tài khoản</label>
					</div>
				</div>
				<div class="element">
					<div class="xxright">
						<input type="radio" value="1" name="checkacc"><label>Có, mật khẩu
							của tôi là :</label>
					</div>
				</div>
				<div class="element">
					<div class="xleft">
						<a href="#">Quên mật khẩu?</a>
					</div>
					<div class="xright" style="">
						<input id="pass" type="password" name="pass">
					</div>
				</div>
				<div>
					<button id="login" value="login">Đăng ký</button>
				</div>
			</form>
		</div>
		<div class="topmenu">
			<a href="#">Đăng nhập/Đăng ký</a>
			<script type="text/javascript">
			
				$('#header .toppanel .box .topmenu a').click(function(){
					if($('.lightbox').length)
					{
						$('#header .toppanel').animate({'margin-top':'-202px'},1000);
						$('#header .toppanel').animate({'margin-top':'-195px'},200);
						$('#header .toppanel').animate({'margin-top':'-198px'},200);
						$('.lightbox').remove();
					}
					else{
					$('#header .toppanel').animate({'margin-top':'0px'},1000);
					$('#header .toppanel').animate({'margin-top':'-10px'},400);
					$('#header .toppanel').animate({'margin-top':'-5px'},300);
					$('html').prepend('<div class="lightbox"></div>');
					$('.lightbox').hide();
					$('.lightbox').css({opacity: '0', display: 'block'}).animate({'opacity':'0.6'},1000);
					$('.lightbox').click(function(){
						$('#header .toppanel').animate({'margin-top':'-201px'},1000);
						$('#header .toppanel').animate({'margin-top':'-196px'},200);
						$('#header .toppanel').animate({'margin-top':'-198px'},200);
						$('.lightbox').remove();
						});
					}
					});
			$('#header .toppanel .box #form .element input#pass').attr("disabled", true);
			$('#header .toppanel .box #form .element input:radio[name=checkacc]').click(function(){
				
			var checkacc = $('#header .toppanel .box #form .element input:radio[name=checkacc]:checked').val();
			if(checkacc == 0){
				$('#header .toppanel .box #form .element input#pass').attr("disabled", true);
				$('#header .toppanel .box #form .element input#pass').css("background","#3B99D3");
				$('#header .toppanel .box #form button').text("Đăng ký");
				}
			else{
				$('#header .toppanel .box #form .element input#pass').attr("disabled", false);
				$('#header .toppanel .box #form .element input#pass').css("background","#777777");
				$('#header .toppanel .box #form button').text("Đăng nhập");
				}
			});
			</script>
		</div>
	</div>
</div>
